Goals

Goal Date Setter 

<div class="row">
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <goal-date-setter id="goal-date-setter-income" />
      </div>
      <div class="panel-footer">
        <button class="btn btn-primary date-btn">Get currentDate</button>
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <goal-date-setter id="goal-date-setter-cost" />
      </div>
      <div class="panel-footer">
        <button class="btn btn-primary date-btn">Get currentDate</button>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <goal-date-setter id="goal-date-setter-result" />
      </div>
      <div class="panel-footer">
        <button class="btn btn-primary date-btn">Get currentDate</button>
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <goal-date-setter id="goal-date-setter-bank" />
      </div>
      <div class="panel-footer">
        <button class="btn btn-primary date-btn">Get currentDate</button>
      </div>
    </div>
  </div>
</div>
this.mixin('jquery') //requires jquery.ui
this.mixin('moment')
this.mixin('utils')    

var currentDate;
const updateValueFunction = function(value) {
  currentDate = value;
}

let data = [
{
    title: "Slutdatum",
    value: 150000,
    startDate: "2017-08-01",
    periods: [["2017-06-01", -5000],["2017-07-01", 12300],["2017-08-01", -45600],["2017-09-01", 78900],["2017-10-01", null],["2017-11-01", null],["2017-12-01", null],["2018-01-01", null],["2018-02-01", null],["2018-03-01", null],["2018-04-01", null],["2018-05-01", null]],
    isExceedGoal: true,
    graphColor: "#27B6B0",
    updateValueFunction: updateValueFunction
},
{
    title: "Slutdatum",
    value: 150000,
    periods: [["2017-06-01", 5000],["2017-07-01", 12300],["2017-08-01", 45600],["2017-09-01", 78900],["2017-10-01", null],["2017-11-01", null],["2017-12-01", null],["2018-01-01", null],["2018-02-01", null],["2018-03-01", null],["2018-04-01", null],["2018-05-01", null]],
    isExceedGoal: true,
    graphColor: "#C01583",
    updateValueFunction: updateValueFunction
},
{
    title: "Slutdatum",
    value: 150000,
    startDate: "2017-08-01",
    periods: [["2017-06-01", 5000],["2017-07-01", 12300],["2017-08-01", 45600],["2017-09-01", 78900],["2017-10-01", null],["2017-11-01", null],["2017-12-01", null],["2018-01-01", null],["2018-02-01", null],["2018-03-01", null],["2018-04-01", null],["2018-05-01", null]],
    isExceedGoal: true,
    graphColor: "#72237A",
    updateValueFunction: updateValueFunction
},
{
    title: "Slutdatum",
    value: 150000,
    periods: [["2017-06-01", 5000],["2017-07-01", 12300],["2017-08-01", 45600],["2017-09-01", 78900],["2017-10-01", null],["2017-11-01", null],["2017-12-01", null],["2018-01-01", null],["2018-02-01", null],["2018-03-01", null],["2018-04-01", null],["2018-05-01", null]],
    isExceedGoal: true,
    graphColor: "#2980B9",
    updateValueFunction: updateValueFunction
}]

let myTag = riot.mount('#goal-date-setter-income', data[0])
myTag[0].on("value:updated", function(value) {
    console.log("value:updated", value)
})

riot.mount('#goal-date-setter-cost', data[1])
riot.mount('#goal-date-setter-result', data[2])
riot.mount('#goal-date-setter-bank', data[3])

Goal Date Value 

<div class="row">
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <goal-date-value id="goal-date-value-income" />
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <goal-date-value id="goal-date-value-cost" />
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <goal-date-value id="goal-date-value-result" />
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <goal-date-value id="goal-date-value-bank" />
      </div>
    </div>
  </div>
</div>
this.mixin('jquery') //requires jquery.ui
this.mixin('moment')
this.mixin('utils')    

const subtitleFormatterFunction = function(sign, value) {
    return `${sign}${value}' kr`;
};

let data = [
  {
    title: "Totala intäkter",
    copy: "Ditt mål är att uppnå",
    value: 100000,
    markerValue: 135600,
    showProgressLine: true,
    startDate: "2017-08-01",
    endDate: "2018-01-01",
    periods: [["2017-06-01", 5000],["2017-07-01", 12300],["2017-08-01", 45600],["2017-09-01", 60000],["2017-10-01", 50500],["2017-11-01", 83400],["2017-12-01", 99500],["2018-01-01", 112000],["2018-02-01", null],["2018-03-01", null],["2018-04-01", null],["2018-05-01", null]],
    graphColor: "#27B6B0",
    subtitleFormatterFunction: subtitleFormatterFunction
},
{
    title: "Totala kostnader",
    copy: "Din total får inte vara högre än",
    value: 100000,
    markerValue: 100000,
    startDate: "2017-08-01",
    endDate: null,
    periods: [["2017-06-01", 5000],["2017-07-01", 12300],["2017-08-01", 45600],["2017-09-01", 80000],["2017-10-01", null],["2017-11-01", null],["2017-12-01", null],["2018-01-01", null],["2018-02-01", null],["2018-03-01", null],["2018-04-01", null],["2018-05-01", null]],
    graphColor: "#C01583",
    subtitleFormatterFunction: subtitleFormatterFunction
},
{
    title: "Totalt resultat",
    copy: "Ditt mål är att uppnå",
    value: -55000,
    markerValue: -46500,
    showProgressLine: true,
    startDate: "2017-07-01",
    endDate: "2017-11-01",
    periods: [["2017-06-01", -5000],["2017-07-01", -12300],["2017-08-01", -45600],["2017-09-01", -45600],["2017-10-01", null],["2017-11-01", null],["2017-12-01", null],["2018-01-01", null],["2018-02-01", null],["2018-03-01", null],["2018-04-01", null],["2018-05-01", null]],
    graphColor: "#72237A",
    subtitleFormatterFunction: subtitleFormatterFunction
},
{
    title: "Total kassa & bank",
    copy: "Din total får inte vara lägre än",
    value: 125000,
    markerValue: 125000,
    startDate: "2017-08-01",
    endDate: null,
    periods: [["2017-06-01", 5000],["2017-07-01", 12300],["2017-08-01", 45600],["2017-09-01", 80000],["2017-10-01", null],["2017-11-01", null],["2017-12-01", null],["2018-01-01", null],["2018-02-01", null],["2018-03-01", null],["2018-04-01", null],["2018-05-01", null]],
    graphColor: "#2980B9",
    subtitleFormatterFunction: subtitleFormatterFunction
}]

riot.mount('#goal-date-value-income', data[0])
riot.mount('#goal-date-value-cost', data[1])
riot.mount('#goal-date-value-result', data[2])
riot.mount('#goal-date-value-bank', data[3])

Goal Value Setter 

<div class="row">
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <goal-value-setter id="goal-value-setter-income" />
      </div>
      <div class="panel-footer">
        <button class="btn btn-primary value-btn">Get currentValue</button>
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <goal-value-setter id="goal-value-setter-cost" />
      </div>
      <div class="panel-footer">
        <button class="btn btn-primary value-btn">Get currentValue</button>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <goal-value-setter id="goal-value-setter-result" />
      </div>
      <div class="panel-footer">
        <button class="btn btn-primary value-btn">Get currentValue</button>
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <goal-value-setter id="goal-value-setter-bank" />
      </div>
      <div class="panel-footer">
        <button class="btn btn-primary value-btn">Get currentValue</button>
      </div>
    </div>
  </div>
</div>
this.mixin('accounting')
this.mixin('jquery') //requires jquery.ui
this.mixin('utils')

const subtitleFormatterFunction = function(sign, value) {
    return `${sign}${Math.abs(value)}' kr`;
};

// variable will be updated everytime handle is moved. 
var currentValue = 0;
const updateValueFunction = function(value) {
  currentValue = value;
};

let data = [
   {
    title: "Totala intäkter",
    start: "feb",
    data: [[1, 5000], [2, 22300], [3, 45600], [4, 100000], [5, null], [6, null], [7, null], [8, null], [9, null], [10, null], [11, null], [12, null]],
    ticks: [[1, 'jan'], [2, 'feb'], [3, 'mar'], [4, 'apr'], [5, 'maj'], [6, 'jun'], [7, 'jul'], [8, 'aug'], [9, 'sep'], [10, 'okt'], [11, 'nov'], [12, 'dec']],
     /** should the goal be exceeded? sets the height of the y-axis accordingly.  */
    headroomFactor: 3,
    graphColor: "#27B6B0",
    subtitleFormatterFunction:  subtitleFormatterFunction,
    updateValueFunction: updateValueFunction
},
{
    title: "Totala kostnader",
    data: [[1, 5000], [2, 12300], [3, 45600], [4, 100000], [5, null], [6, null], [7, null], [8, null], [9, null], [10, null], [11, null], [12, null]],
    ticks: [[1, 'jan'], [2, 'feb'], [3, 'mar'], [4, 'apr'], [5, 'maj'], [6, 'jun'], [7, 'jul'], [8, 'aug'], [9, 'sep'], [10, 'okt'], [11, 'nov'], [12, 'dec']],
     /** should the goal be exceeded? sets the height of the y-axis accordingly.  */
    headroomFactor: 1.3,
    graphColor: "#C01583",
    subtitleFormatterFunction:  subtitleFormatterFunction,
    updateValueFunction: updateValueFunction
},
{
    title: "Totalt resultat",
    start: "jan",
    data: [[1, 200], [2, 0], [3, -825], [4, -855], [5, -680], [6, null], [7, null], [8, null], [9, null], [10, null], [11, null], [12, null]],
    ticks: [[1, 'jan'], [2, 'feb'], [3, 'mar'], [4, 'apr'], [5, 'maj'], [6, 'jun'], [7, 'jul'], [8, 'aug'], [9, 'sep'], [10, 'okt'], [11, 'nov'], [12, 'dec']],
     /** should the goal be exceeded? sets the height of the y-axis accordingly.  */
    headroomFactor: 3,
    graphColor: "#72237A",
    subtitleFormatterFunction:  subtitleFormatterFunction,
    updateValueFunction: updateValueFunction
},
{
    title: "Totala kassa & bank",
    data: [[1, 5000], [2, 12300], [3, 45600], [4, 100000], [5, null], [6, null], [7, null], [8, null], [9, null], [10, null], [11, null], [12, null]],
    ticks: [[1, 'jan'], [2, 'feb'], [3, 'mar'], [4, 'apr'], [5, 'maj'], [6, 'jun'], [7, 'jul'], [8, 'aug'], [9, 'sep'], [10, 'okt'], [11, 'nov'], [12, 'dec']],
     /** should the goal be exceeded? sets the height of the y-axis accordingly.  */
    headroomFactor: 3,
    graphColor: "#2980B9",
    subtitleFormatterFunction:  subtitleFormatterFunction,
    updateValueFunction: updateValueFunction
}]


let myTag = riot.mount('#goal-value-setter-income', data[0])
myTag[0].on("value:updated", function(value) {
    console.log("value:updated", value)
})

riot.mount('#goal-value-setter-cost', data[1])
riot.mount('#goal-value-setter-result', data[2])
riot.mount('#goal-value-setter-bank', data[3])

Goal Widgets 

<div class="row">
  <div class="col-xs-3">
    <div class="panel">
      <div class="panel-body">
        <goal-widget id="goal-widget-1" />
      </div>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="panel">
      <div class="panel-body">
        <goal-widget id="goal-widget-2" />
      </div>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="panel">
      <div class="panel-body">
        <goal-widget id="goal-widget-3" />
      </div>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="panel">
      <div class="panel-body">
        <goal-widget id="goal-widget-4" />
      </div>
    </div>
  </div>
</div>
this.mixin('moment')
this.mixin('jquery')
this.mixin('jquery-knob')

const data1 = {
    title: "Kassan får ej understiga 500' kr denna månad",
    subtitle: "1000' kr",
    actual: 1000,
    val: 500,
    percentValue: 50,
    end: "2016-01-01",
    bgColor: "#F5F6F8",
    fgColor: "#2980B9",
    inputColor: "#BAC3D2"
}
const data2 = {
    title: "Totalt resultat på 500' kr innan jan 2016",
    subtitle: "500' kr",
    actual: 500,
    val: 500,
    percentValue: 100,
    end: "2016-01-01",
    bgColor: "#F5F6F8",
    fgColor: "#72237A",
    inputColor: "#BAC3D2"
}
const data3 = {
    title: "Totala kostnader får ej överstiga 500' kr denna månad",
    subtitle: "250' kr",
    actual: 250,
    val: 500,
    percentValue: 50,
    end: "2016-01-01",
    bgColor: "#F5F6F8",
    fgColor: "#C01583",
    inputColor: "#BAC3D2"
}
const data4 = {
    title: "Totala intäkter på 500' kr innan jan 2016",
    subtitle: "100' kr",
    actual: 100,
    val: 500,
    percentValue: 50,
    end: "2016-01-01",
    bgColor: "#F5F6F8",
    fgColor: "#27B6B0",
    inputColor: "#BAC3D2"
}

riot.mount('#goal-widget-1', data1);
riot.mount('#goal-widget-2', data2);
riot.mount('#goal-widget-3', data3);
riot.mount('#goal-widget-4', data4);